import React, {Component} from 'react';
import {
    View, Text, Image,
    StyleSheet
} from 'react-native';

import {
    Button, Icon
} from 'react-native-elements';

import UserStore from '../stores/UserStore';

export default class UserBanner extends Component {
    render() {
        const {loggedIn} = UserStore;
        const {navigation} = this.props;
        return (
            <View style={styles.userBanner}>
                {!loggedIn && 
                    <Text style={styles.loginTip}>新用户注册立刻领取优惠券</Text>
                }
                {!loggedIn && 
                    <Button 
                        title='登陆/注册'
                        titleStyle={_styles.loginButton.title}
                        buttonStyle={_styles.loginButton.button}
                        containerStyle={_styles.loginButton.container}
                        onPress={() => navigation.navigate('auth.login')}
                    />
                }
                <Icon
                    name='gear'
                    type='evilicon'
                    size={28}
                    color='#FFF'
                    containerStyle={_styles.gearIcon.container}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    userBanner: {
        width: '100%',
        height: 230,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffcd00',
    },
    loginTip: {
        fontSize:14,
        color:'#FFF',
    },
});

const _styles = {
    loginButton:{
        title: {
            fontSize: 12,
            color: 'orangered'
        },
        button: {
            backgroundColor: '#FFF',
            borderRadius:5,
            width:80,
            height:24,
            marginTop:10,
        },
        container: null,
    },
    gearIcon: {
        container: {
            position:'absolute',
            top: 20,
            right: 20,
        },
    },
}